<template>
    <div>
        <el-card>
            <el-page-header content="添加产品" icon="" title="产品管理"></el-page-header>
            <el-form ref="productFormRef" :model="productForm" :rules="productFormRules" label-width="80px"
                class="demo-ruleForm" status-icon>
                <el-form-item label="产品名称" prop="title">
                    <el-input v-model="productForm.title" placeholder="请输入产品名称" />
                </el-form-item>
                <el-form-item label="产品概要描述" prop="introduction">
                    <el-input type="textarea" v-model="productForm.introduction" resize="none" :rows="2" maxlength="100"
                        placeholder="请输入产品概要描述" show-word-limit />
                </el-form-item>
                <el-form-item label="产品详细描述" prop="detail">
                    <el-input type="textarea" v-model="productForm.detail" resize="none" :rows="4" maxlength="200"
                        placeholder="请输入产品概要描述" show-word-limit />
                </el-form-item>
                <el-form-item label="产品图片" prop="cover">
                    <Upload :avatar="productForm.cover" @uploadChange="handleChange"></Upload>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm">添加产品</el-button>
                </el-form-item>
            </el-form>
        </el-card>

    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import Upload from '@/components/upload/Upload'
import { ElMessage } from 'element-plus'
import upload from '@/util/upload';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex'
const store = useStore()
const router = useRouter()

// 关联productForm表单ref
const productFormRef = ref()
// 双向绑定productForm表单数据
const productForm = reactive({
    title: "",
    publisher: store.state.userInfo.username,
    introduction: "",
    detail: "",
    cover: "",
    file: null
})

// 定义规则校验
const productFormRules = reactive({
    title: [
        { required: true, message: '请输入你的产品名称', trigger: 'blur' },
    ],
    introduction: [
        { required: true, message: '请输入你的产品概要', trigger: 'blur' },
    ],
    detail: [
        { required: true, message: '请输入你的产品详情', trigger: 'blur' },
    ],
    cover: [
        { required: true, message: '请选择你的产品图片', trigger: 'blur' },
    ],
})

// 选择完图片的回调
const handleChange = (file) => {
    productForm.cover = URL.createObjectURL(file)
    productForm.file = file
}

const submitForm = () => {
    productFormRef.value.validate(async (valid) => {
        if (valid) {
            const result = await upload("/adminapi/product/add", productForm)
            // console.log(result);
            if (result.ActionType === 'OK') {
                ElMessage.success("产品添加成功")
                router.push('/product-manage/productlist')
            } else {
                ElMessage.error(result.errorMsg)
            }

        } else {
            ElMessage.error("校验未通过！请检查表单填写是否有误！")
        }
    })
}
</script>


<style lang="scss" scoped>
.demo-ruleForm {
    margin-top: 50px;
}
</style>